export class IgxToggleActionDirective implements OnInit {
    protected element = inject(ElementRef);
    protected navigationService = inject(IgxNavigationService, { optional: true });

    /**
     * Provide settings that control the toggle overlay positioning, interaction and scroll behavior.
     * ```typescript
     * const settings: OverlaySettings = {
     *      closeOnOutsideClick: false,
     *      modal: false
     *  }
     * ```
     * ---
     * ```html
     * <!--set-->
     * <div igxToggleAction [overlaySettings]="settings"></div>
     * ```
     */
    @Input()
    public overlaySettings: OverlaySettings;

    /**
     * @hidden
     */
    @Input('igxToggleAction')
    public set target(target: any) {
        if (target !== null && target !== '') {
            this._target = target;
        }
    }

    /**
     * @hidden
     */
    public get target(): any {
        if (typeof this._target === 'string') {
            return this.navigationService.get(this._target);
        }
        return this._target;
    }

    protected _overlayDefaults: OverlaySettings;
    protected _target: IToggleView | string;

    /**
     * @hidden
     */
    @HostListener('click')
    public onClick() {
        const clonedSettings = Object.assign({}, this._overlayDefaults, this.overlaySettings);
        this.updateOverlaySettings(clonedSettings);
        this.target.toggle(clonedSettings);
    }

export class IgxToggleActionDirective implements OnInit {
    protected element = inject(ElementRef);
    protected navigationService = inject(IgxNavigationService, { optional: true });

    /**
     * Provide settings that control the toggle overlay positioning, interaction and scroll behavior.
     * ```typescript
     * const settings: OverlaySettings = {
     *      closeOnOutsideClick: false,
     *      modal: false
     *  }
     * ```
     * ---
     * ```html
     * <!--set-->
     * <div igxToggleAction [overlaySettings]="settings"></div>
     * ```
     */
    @Input()
    public overlaySettings: OverlaySettings;

    /**
     * @hidden
     */
    @Input('igxToggleAction')
    public set target(target: any) {
        if (target !== null && target !== '') {
            this._target = target;
        }
    }

    /**
     * @hidden
     */
    public get target(): any {
        if (typeof this._target === 'string') {
            return this.navigationService.get(this._target);
        }
        return this._target;
    }

    protected _overlayDefaults: OverlaySettings;
    protected _target: IToggleView | string;

    /**
     * @hidden
     */
    @HostListener('click')
    public onClick() {
        const clonedSettings = Object.assign({}, this._overlayDefaults, this.overlaySettings);
        this.updateOverlaySettings(clonedSettings);
        this.target.toggle(clonedSettings);
    }

import { Directive, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core';
import { IToggleView } from 'igniteui-angular/core';
import { IPositionStrategy, OverlaySettings } from 'igniteui-angular/core';
import { IgxToggleDirective } from '../toggle/toggle.directive';

@Directive()
export abstract class IgxNotificationsDirective extends IgxToggleDirective
    implements IToggleView, OnDestroy {
    /**
     * Sets/gets the `aria-live` attribute.
     * If not set, `aria-live` will have value `"polite"`.
     */
    @HostBinding('attr.aria-live')
    @Input()
    public ariaLive = 'polite';

    /**
     * Sets/gets whether the element will be hidden after the `displayTime` is over.
     * Default value is `true`.
     */
    @Input({ transform: booleanAttribute })
    public autoHide = true;

    /**
     * Sets/gets the duration of time span (in milliseconds) which the element will be visible
     * after it is being shown.
     * Default value is `4000`.
     */
    @Input()
    public displayTime = 4000;

    /**
     * Controls whether positioning is relative to the viewport or to the nearest positioned container.
     */
    @Input()
    public positioning: 'viewport' | 'container' = 'viewport';

    /**
     * Enables/Disables the visibility of the element.
     * If not set, the `isVisible` attribute will have value `false`.
     */
    @Input({ transform: booleanAttribute })
    public get isVisible() {
        return !this.collapsed;
    }

    public set isVisible(value) {
        if (value !== this.isVisible) {
            if (value) {
                requestAnimationFrame(() => {
                    this.open();
                });
            } else {
                this.close();
            }
        }
    }

    /**
     * @hidden
     * @internal
     */
    public textMessage = '';

    /**
     * @hidden
     */
    public timeoutId: number;

    /**
     * @hidden
     */
    protected strategy: IPositionStrategy;

    /**
     * @hidden
     */
    public override open() {
        clearInterval(this.timeoutId);

        const overlaySettings: OverlaySettings = {
            positionStrategy: this.strategy,
            closeOnEscape: false,
            closeOnOutsideClick: false,
            modal: false
        };

        super.open(overlaySettings);

        if (this.autoHide) {

export class IgxToggleActionDirective implements OnInit {
    protected element = inject(ElementRef);
    protected navigationService = inject(IgxNavigationService, { optional: true });

    /**
     * Provide settings that control the toggle overlay positioning, interaction and scroll behavior.
     * ```typescript
     * const settings: OverlaySettings = {
     *      closeOnOutsideClick: false,
     *      modal: false
     *  }
     * ```
     * ---
     * ```html
     * <!--set-->
     * <div igxToggleAction [overlaySettings]="settings"></div>
     * ```
     */
    @Input()
    public overlaySettings: OverlaySettings;

    /**
     * @hidden
     */
    @Input('igxToggleAction')
    public set target(target: any) {
        if (target !== null && target !== '') {
            this._target = target;
        }
    }

    /**
     * @hidden
     */
    public get target(): any {
        if (typeof this._target === 'string') {
            return this.navigationService.get(this._target);
        }
        return this._target;
    }

    protected _overlayDefaults: OverlaySettings;
    protected _target: IToggleView | string;

    /**
     * @hidden
     */
    @HostListener('click')
    public onClick() {
        const clonedSettings = Object.assign({}, this._overlayDefaults, this.overlaySettings);
        this.updateOverlaySettings(clonedSettings);
        this.target.toggle(clonedSettings);
    }

import { Directive, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core';
import { IToggleView } from 'igniteui-angular/core';
import { IPositionStrategy, OverlaySettings } from 'igniteui-angular/core';
import { IgxToggleDirective } from '../toggle/toggle.directive';

@Directive()
export abstract class IgxNotificationsDirective extends IgxToggleDirective
    implements IToggleView, OnDestroy {
    /**
     * Sets/gets the `aria-live` attribute.
     * If not set, `aria-live` will have value `"polite"`.
     */
    @HostBinding('attr.aria-live')
    @Input()
    public ariaLive = 'polite';

    /**
     * Sets/gets whether the element will be hidden after the `displayTime` is over.
     * Default value is `true`.
     */
    @Input({ transform: booleanAttribute })
    public autoHide = true;

    /**
     * Sets/gets the duration of time span (in milliseconds) which the element will be visible
     * after it is being shown.
     * Default value is `4000`.
     */
    @Input()
    public displayTime = 4000;

    /**
     * Controls whether positioning is relative to the viewport or to the nearest positioned container.
     */
    @Input()
    public positioning: 'viewport' | 'container' = 'viewport';

    /**
     * Enables/Disables the visibility of the element.
     * If not set, the `isVisible` attribute will have value `false`.
     */
    @Input({ transform: booleanAttribute })
    public get isVisible() {
        return !this.collapsed;
    }

    public set isVisible(value) {
        if (value !== this.isVisible) {
            if (value) {
                requestAnimationFrame(() => {
                    this.open();
                });
            } else {
                this.close();
            }
        }
    }

    /**
     * @hidden
     * @internal
     */
    public textMessage = '';

    /**
     * @hidden
     */
    public timeoutId: number;

    /**
     * @hidden
     */
    protected strategy: IPositionStrategy;

    /**
     * @hidden
     */
    public override open() {
        clearInterval(this.timeoutId);

        const overlaySettings: OverlaySettings = {
            positionStrategy: this.strategy,
            closeOnEscape: false,
            closeOnOutsideClick: false,
            modal: false
        };

        super.open(overlaySettings);

        if (this.autoHide) {

        const overlaySettings = Object.assign({}, this.isDropdown
            ? this.dropDownOverlaySettings
            : this.dialogOverlaySettings
            , settings);

        if (this.isDropdown && this.inputGroupElement) {
            overlaySettings.target = this.inputGroupElement;
        }
        this._overlayId = this._overlayService
            .attach(IgxCalendarContainerComponent, this.viewContainerRef, overlaySettings);
        this._overlayService.show(this._overlayId);
    }